/* pages/recharge/recharge.wxss */
.recharge {
    width: 100vw;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-bottom: 130rpx;
}

.top-box {
    margin: 3vw 0;
    position: relative;
}

.top-bg {
    width: 100%;
    height: 300rpx;
}

.top-content {
    width: 100%;
    height: 300rpx;
    padding: 40rpx;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
}

.top-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.plus-user-type {
    color: #f2b797;
    font-size: 38rpx;
    letter-spacing: 2rpx;
    line-height: 50rpx;
}

.plus-user-name {
    font-size: 24rpx;
    color: white;
    letter-spacing: 2rpx;
    line-height: 42rpx;
}

.plus-balance-box {
    color: #f2b797;
    display: flex;
    align-items: flex-end;
}

.plus-balance-text {
    font-size: 26rpx;
    margin-right: 20rpx;
}

.plus-balance {
    font-size: 54rpx;
    line-height: 54rpx;
}

.ordinary-user-name {
    font-size: 38rpx;
    letter-spacing: 2rpx;
    line-height: 50rpx;
    color: #333;
}

.ordinary-user-type {
    font-size: 24rpx;
    color: #333;
    letter-spacing: 2rpx;
    line-height: 42rpx;
}

.recharge-list {
    box-sizing: border-box;
    border-radius: 1vw;
    margin: 20rpx auto;
    padding: 20rpx;
    background-color: white;
}

.ordinary-balance-box {
    color: #ff3d3d;
    display: flex;
    align-items: flex-end;
}

.ordinary-balance-text {
    font-size: 26rpx;
    margin-right: 20rpx;
}

.ordinary-balance {
    font-size: 54rpx;
    line-height: 54rpx;
}

.chong_tips {
    width: 100%;
    float: left;
    text-align: center;
    font-size: 24rpx;
    color: #f23e26;
}

.mychong {
    width: 700rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    margin: 20rpx auto;
    padding: 5rpx;
    background-color: white;
}

.mypaytip {
    color: #999;
    padding: 20rpx;
}

.mypaymoney {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
}

.mypay {
    font-size: 32rpx;
}

.mypaymoney input {
    flex: 1;
    font-size: 28rpx;
    padding-left: 10rpx;
}

.pl {
    font-size: 24rpx;
}

.submitpay {
    width: 690rpx;
	background: linear-gradient(to right, rgba(var(--primary-rgb-color), 0.7), var(--primary-color));
    color: #fff;
    box-sizing: border-box;
    text-align: center;
    font-size: 30rpx;
    height: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 10rpx;
    left: 30rpx;
    border-radius: 50rpx;
	z-index: 100;
}

.recharge-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 120rpx;
    box-sizing: border-box;
    border: 1rpx solid #eee;
    border-radius: 10rpx;
    overflow: hidden;
}

.recharge-con {
    position: relative;
    margin: 20rpx 0 0;
	width: 31%;
}

.recharge-con:nth-child(3n-1) {
    margin-left: 3.5%;
    margin-right: 3.5%;
}

.present {
    font-size: 22rpx;
    color: #e54d5c;
}

.present-title {
    font-size: 22rpx;
    color: #999999;
}

.active {
    border-color: #ff5c6d;
}

.active-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40rpx;
    height: 40rpx;
}

.time {
    position: absolute;
    padding: 0 12rpx;
    background-color: #000;
    font-size: 16rpx;
    color: #ff5c6d;
    border-top-right-radius: 16rpx;
    border-bottom-left-radius: 16rpx;
    line-height: 26rpx;
    top: -16rpx;
    right: 0;
    letter-spacing: 0rpx;
}

.not-available {
    color: #c1c1c1;
    text-align: center;
    margin-top: 14rpx;
}

.activity {
    color: #333;
    font-size: 28rpx;
    line-height: 42rpx;
    letter-spacing: 2rpx;
    padding-left: 3rpx;
}

.flex-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10rpx 0;
    width: 100%;
    box-sizing: border-box;
}

.money {
    color: #111;
    font-size: 28rpx;
    letter-spacing: 2rpx;
}


/* 弹出层 */
.alert-mask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}

.alert-com {
  width: 86%;
  background: #fff;
  position: absolute;
  top: 340rpx;
  left: 7%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.alert-title {
  text-align: center;
  padding: 26rpx 20rpx 20rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
}

.Inventory-Box {
  padding: 10rpx 30rpx;
  font-size: 28rpx;
  height: 240rpx;
  overflow: scroll;
  border-top: 1rpx solid #eee;
}

.clear {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: 18rpx;
  right: 20rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5rpx;
}

.clear:active {
  background-color: rgba(0, 0, 0, 0.5);
}

.list-child{
	color: #999999;
	display: flex;
	margin-top: 8rpx;
}

.vip-id{
	display: flex;
	margin-top: 4rpx;
}

.vip-iden{
	height: 47rpx;
	width: 43rpx;
	z-index: 100;
}

.vip-grade-name{
	padding: 0 15rpx 0 32rpx;
	background: rgba(0,0,0,0.4);
	height: 40rpx;
	line-height: 38rpx;
	border-radius: 10rpx;
	position: relative;
	top: 5rpx;
	right: 12px;
	z-index: 0;
	color: #DAB679;
	font-size: 24rpx;
}

.alert-close-icon {
	font-size: 28rpx;
	color: #999999;
	padding: 26rpx;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}